<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script th:src="@{/plugins/My97DatePicker/WdatePicker.js}"></script>
    <title>明细操作</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('明细操作','明细操作')"></div>
</div>

<div th:fragment="content" th:remove="tag">

    <div class="modal-content">
        <div class="modal-header" style="background-color: #307095;">
            <h4 class="modal-title" id="myModalLabel3">订单信息</h4>
        </div>
        <div class="modal-body" >
            <table  class="table table-striped table-bordered table-hover table-condensed" id="tableAppend">
                <tr>
                    <td th:text="'订单号：'+${problemInfo.orderNo}"></td>
                    <td th:text="'物品名称：'+${problemInfo.goodsName}"></td>
                </tr>
                <tr>
                    <td th:text="'省份：'+${problemInfo.provinceName}"></td>
                    <td th:text="'市区：'+${problemInfo.cityName}"></td>
                </tr>
                <tr>
                    <td th:text="'订单金额：'+${problemInfo.amount}"></td>
                    <td th:text="'状态：'+${problemInfo.statusStr}"></td>
                </tr>
                <tr>
                    <td th:text="'回收人：'+${problemInfo.empName}"></td>
                    <td th:text="'工号：'+${problemInfo.empNo}"></td>
                </tr>
                <tr>
                    <td th:text="'门店：'+${problemInfo.storeName}"></td>
                </tr>
            </table>
        </div>
        <div class="modal-header" style="background-color: #307095;">
            <h4 class="modal-title" id="myModalLabel4">问题信息</h4>
        </div>
        <div class="modal-body">
            <form class="form-horizontal"  id="editForm"  method="post">
                <div class="form-group">
                    <label class="col-sm-3 control-label">标题</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" readonly="readonly" name="problemTittle" th:value="${problemInfo.problemTittle}"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">问题描述</label>
                    <div class="col-sm-9">
                        <textarea class='form-control' name="problemText" readonly="readonly" th:text="${problemInfo.problemText}" ></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">图片</label>
                    <div class="col-sm-9">
                        <a href="javascript:;" onclick="showPic()"><img id="showImage" th:src="${problemInfo.imageUrl}" style="float:left;" width="80" height="110" /></a>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-header" style="background-color: #307095;">
            <h4 class="modal-title" id="myModalLabel5">问题描述</h4>
        </div>
        <div class="modal-body">
            <div id="forAppend">
                <ul class="timeline" th:each="detail,detailStat:${detailList}">
                    <li class="time-label">
                        <span class="bg-red" th:text="${detail.createTimeStr}">
                        </span>
                    </li>
                    <li>
                        <i class="fa fa-user bg-aqua"></i>
                        <div class="timeline-item">
                            <h3 class="timeline-header no-border" th:text="${detail.operateName}+' :'"></h3>

                            <div class="timeline-body" th:text="${detail.operateText}">

                            </div>
                        </div>
                    </li>
                    <li th:hidden="${detail.imageUrl} ? false : hidden">
                        <div class="timeline-item">
                            <a href="javascript:;" onclick="showPic_detail(event)"><img id="showImageDetail" th:src="${detail.imageUrl}" style="float:left;" width="80" height="110" /></a>
                        </div>
                    </li>
                </ul>
            </div>
            <shiro:hasAnyRoles name="esti_expr_qc,admin,sys_agency,express_qc">
                <div class='btn-group' th:if="${problemInfo.status}==1 or ${problemInfo.status}==0">
                    <button id='addProblem' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>增加说明</button>
                </div>
            </shiro:hasAnyRoles>

        </div>
        <div class="modal-header" style="background-color: #307095;">
            <h4 class="modal-title" id="myModalLabel7">处理结果</h4>
        </div>
        <div class="modal-body">
            <form class="form-horizontal"  method="post">
                <div class="form-group" th:if="${problemInfo.status}==3">
                    <label class='col-sm-3 control-label'>处理结果</label>
                    <div class='col-sm-9'>
                        <input type='text' class='form-control' readonly='readonly' value='处理完成，该问题已解决'/>
                    </div>
                </div>
                <div class="form-group" th:if="${problemInfo.status}==2">
                    <label class='col-sm-3 control-label'>处理结果</label>
                    <div class='col-sm-9'>
                        <input type='text' class='form-control' readonly='readonly' value='处理完成，该订单申请退货，请等待运营人员处理！'/>
                    </div>
                </div>
                <shiro:hasRole name="sys_nationwide">
                    <div class="form-group"  th:if="${problemInfo.status}==1" >
                        <label class='col-sm-3 control-label'>处理结果</label>
                        <div class='col-sm-9'>
                            <input type='text' class='form-control' readonly='readonly' value='处理中。。。。。'/>
                        </div>
                    </div>
                    <div class="form-group"  th:if="${problemInfo.status}==0" >
                        <label class='col-sm-3 control-label'>处理结果</label>
                        <div class='col-sm-9'>
                            <input type='text' class='form-control' readonly='readonly' value='待处理。。。。。'/>
                        </div>
                    </div>
                </shiro:hasRole>
                <shiro:hasAnyRoles name="esti_expr_qc,admin,express_qc">
                    <div class="form-group" id="manageResult" th:if="${problemInfo.status}==1 or ${problemInfo.status}==0" >
                        <button id='btn-back' class='btn btn-primary btn-sm' style="margin-left: 200px;" type='button'><i class='fa fa-edit'></i>申请退货</button>
                        <button id='btn-resolve' class='btn btn-primary btn-sm' style="margin-left: 400px;" type='button'><i class='fa fa-edit'></i>问题解决</button>
                    </div>
                </shiro:hasAnyRoles>
                <shiro:hasRole name="sys_agency">
                    <div class="form-group" id="manageResult" th:if="${problemInfo.status}==1 or ${problemInfo.status}==0" >
                        <button id='btn-back' class='btn btn-primary btn-sm' style="margin-left: 200px;" type='button'><i class='fa fa-edit'></i>申请退货</button>
                    </div>
                </shiro:hasRole>
            </form>
        </div>
        <!-- modal-body END -->
    </div>
    <div class="box-footer">
        <button type="button" class="btn btn-primary pull-right"  onclick="location.href='/problem/info'">返回</button>
    </div>
    <div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #307095;">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel2">增加说明</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal"  id="detailForm" action="/esti/edit" method="post">
                        <input type="hidden" id="problemId" name="problemId" th:value="${problemInfo.problemId}"/>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">描述</label>
                            <div class="col-sm-9">
                                <textarea class='form-control' id="operateText" name="operateText" placeholder='请输入描述信息...'></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">图片</label>
                            <div class="col-sm-9">
                                <img id="showImage-detail" th:src="@{/dist/img/pictures.png}" style="float:left;" width="80" height="110" />
                            </div>
                            <div class="col-sm-9">
                                <input type="hidden" name="imageUrl" id="imageUrl-detail" value=""/>
                                <a id="selectImage" class="btn btn-primary" style="height: 21px;font-size: 12px;text-align: center;padding-top: 2px;position:absolute;left: 166px;top:-10px;" href="javascript:;">点击上传</a>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- modal-body END -->
                <div class="modal-footer">
                    <button type="submit" id="btn-submit" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!--图片信息 -->
    <div class="modal fade" id="pictureModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <img src="" style="width: 480px;height: 560px;"  id="imageUrl"/>
        </div>
    </div>

    <div class="modal fade" id="pictureModal_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <img src="" style="width: 480px;height: 560px;"  id="imageUrl-detail-show"/>
        </div>
    </div>
    <!-- DataTables -->
    <script th:src="@{/plugins/jQuery/plupload.full.min.js}"></script>
    <script type="text/javascript">

        $(function (){

            var uploader = new plupload.Uploader({
                runtimes : 'html5,flash,silverlight',//设置运行环境，会按设置的顺序，
                url : '/sysUpload/uploadImg',
                max_file_size : '10M',
                browse_button : 'selectImage',
                filters : [ {
                    title : 'Image files',
                    extensions : 'jpg,gif,png'
                }],
                init : {
                    FilesAdded: function(up, files) {
                        uploader.start();
                        return false;
                    },
                    FileUploaded : function(up, file, info) {//文件上传完毕触发
                        console.log("单独文件上传完毕");
                        var response = $.parseJSON(info.response);
                        if(response.result==200){
                            alert(response.msg);
                            $("#imageUrl-detail").val(response.data);
                            $("#showImage-detail").attr("src",response.data);
                        }else{
                            alert(response.msg);
                        }
                    }
                }
            });
            uploader.init();




            $("#addProblem").on("click",function () {
                $("#showImage-detail").attr("src","/dist/img/pictures.png");
                $("#detailModal").modal("show");
            })
            $("#btn-resolve").on("click",function () {
                $("#btn-resolve").attr("disabled",true);
                var problemId = $("#problemId").val();
                $.ajax({
                    url: '/problem/edit',
                    type: 'POST',
                    data: {"problemId":problemId,"status":3},
                    dataType: "json",
                    cache: "false",
                    success: function (result) {
                        if (result.result == 200) {
                            /*<![CDATA[*/
                            toastr.success(result.msg);
                            $("#manageResult button").remove();
                            $("#manageResult").append("<label class='col-sm-3 control-label'>处理结果</label><div class='col-sm-9'>"+
                                "<input type='text' class='form-control' readonly='readonly' value='处理完成，该问题已解决'/></div>")
                            /*]]>*/
                        } else {
                            toastr.error(result.msg);
                            $("#btn-resolve").attr("disabled",false);
                        }
                    },
                    error: function (err) {
                        toastr.error("网络错误...");
                        $("#btn-resolve").attr("disabled",false);
                    }
                });
            })
            $("#btn-back").on("click",function () {
                $("#btn-back").attr("disabled",true);
                var problemId = $("#problemId").val();
                $.ajax({
                    url: '/problem/edit',
                    type: 'POST',
                    data: {"problemId":problemId,"status":2},
                    dataType: "json",
                    cache: "false",
                    success: function (result) {
                        if (result.result == 200) {
                            /*<![CDATA[*/
                            toastr.success(result.msg);
                            $("#manageResult button").remove();
                            $("#manageResult").append("<label class='col-sm-3 control-label'>处理结果:</label><div class='col-sm-9'>"+
                                "<input type='text' class='form-control' readonly='readonly' value='处理完成，该订单申请退货，请等待运营人员处理！'/></div>")
                            /*]]>*/
                        } else {
                            toastr.error(result.msg);
                            $("#btn-back").attr("disabled",false);
                        }
                    },
                    error: function (err) {
                        toastr.error("网络错误...");
                        $("#btn-back").attr("disabled",false);
                    }
                });
            })
            $("#btn-submit").on("click",function () {
                $("#btn-submit").attr("disabled",true);
                if($("#operateText").val()){
                    $.ajax({
                        url: '/problem/addDetail',
                        type: 'POST',
                        data: $("#detailForm").serialize(),
                        dataType: "json",
                        cache: "false",
                        success: function (result) {
                            if (result.result == 200) {
                                /*<![CDATA[*/

                                if(result.data.imageUrl === ''){
                                    $("#forAppend").append("<ul class='timeline'><li class='time-label'><span class='bg-red' >"+result.data.createTimeStr+"</span>"+
                                        "</li><li><i class='fa fa-user bg-aqua'></i><div class='timeline-item'><h3 class='timeline-header no-border'>"+result.data.operateName+" :</h3>"+
                                        "<div class='timeline-body'>"+result.data.operateText+"</div></div></li></ul>")
                                }else {
                                    $("#forAppend").append("<ul class='timeline'><li class='time-label'><span class='bg-red' >"+result.data.createTimeStr+"</span>"+
                                        "</li><li><i class='fa fa-user bg-aqua'></i><div class='timeline-item'><h3 class='timeline-header no-border'>"+result.data.operateName+" :</h3>"+
                                        "<div class='timeline-body'>"+result.data.operateText+"</div></div></li><li><div class='timeline-item'>"+
                                    "<a href='javascript:;' onclick='showPic_detail(event)'><img  src='"+result.data.imageUrl+"' style='float:left;' width='80' height='110'/></a></div></li></ul>")
                                }



                                toastr.success(result.msg);
                                $("#btn-submit").attr("disabled",false);
                                $("#detailModal").modal("hide");

                                /*]]>*/
                            } else {
                                toastr.error(result.msg);
                                $("#btn-submit").attr("disabled",false);
                            }
                        },
                        error: function (err) {
                            toastr.error("网络错误...");
                            $("#btn-submit").attr("disabled",false);
                        }
                    });
                }else{
                    alert("请录入说明内容");
                }
            })

        })
        function showPic() {
           var url = $("#showImage").attr("src");
           $("#imageUrl").attr("src",url);
           $("#pictureModal").modal("show");
        }

        function showPic_detail(event) {
            x=event.target.src;
            $("#imageUrl-detail-show").attr("src",x);
            $("#pictureModal_detail").modal("show");
        }




    </script>


</div>
</body>
</html>
